<template>
  <div class="home_introduction" :class="{ home_introduction_m: isMobile() }">
    <div class="introduction_top">
      <div class="introduction_top_title font_32">最车（河南）数字科技有限公司</div>
      <div class="introduction_top_dis font_16">
        最车（河南）数字科技有限公司成立于2025年，是集车企线索营销、留资获客、需求任务发布于一体的综合服务平台，拥有专业汽车主播和购车顾问，构建线上、线下相融合的引流消费矩阵。全渠道布局、全时段触达不同层次消费客群，通过高频线上曝光向线下引流达成交易，创新运营方式，赋能传统零售，打造车企营销新理念。
      </div>
    </div>
    <div class="introduction_bottom" :class="{ flex_left_right: !isMobile() }">
      <div class="flex_right flex_left_right" :style="{marginTop:isMobile()?'30px':''}">
        <div class="flex_right" v-for="(item, index) in dataList" :key="index">
          <div class="introduction_bottom_title" :class="isMobile() ? 'font_22' : 'font_62'">
            <span>{{ item.label }}</span>
            <span class="title_text" :class="isMobile() ? 'font_22' : 'font_32'">{{ item.test }}</span>
          </div>
          <div class="introduction_bottom_dis" :class="isMobile() ? 'font_18' : 'font_32'">{{ item.dis }}</div>
        </div>
      </div>
      <div class="flex_right flex_left_right" :style="{marginTop:isMobile()?'30px':''}">
        <div class="flex_right" v-for="(item, index) in dataCountList" :key="index">
          <div class="introduction_bottom_title" :class="isMobile() ? 'font_22' : 'font_62'">
            <span>{{ item.label }}</span>
            <span class="title_text" :class="isMobile() ? 'font_22' : 'font_32'">{{ item.test }}</span>
          </div>
          <div class="introduction_bottom_dis" :class="isMobile() ? 'font_18' : 'font_32'">{{ item.dis }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { isMobile } from '@/utils'
  import { ref } from 'vue'
  const dataList = ref<{ label: string; dis: string; test: string }[]>([
    { label: '4', dis: '粉丝总量', test: '亿+' },
    { label: '2000', dis: '签约/合作达人', test: '+' },
    { label: '500', dis: '精英主播', test: '+' },
  ])
  const dataCountList = ref<{ label: string; dis: string; test: string }[]>([
    { label: '5', dis: '转化率', test: '%' },
    { label: '10', dis: '增长率', test: '%' },
    { label: '21', dis: '市场占比', test: '%' },
  ])
</script>
<style scoped lang="less">
  .home_introduction {
    background: url('/src/assets/img/home/introduction.png') no-repeat;
    background-size: 100% 100%;
    padding: 54px 0 64px 0;
    color: #ffffff;
    text-align: center;
    margin: 72px 0 116px 0;
    .introduction_top {
      width: 50%;
      margin: 0 auto;
      .introduction_top_title {
        margin-bottom: 23px;
      }
    }
    .introduction_bottom {
      margin-top: 65px;
      .introduction_bottom_title {
        font-weight: 600;
        line-height: 88px;
      }
      .title_text {
        font-weight: 200;
        vertical-align: text-top;
        margin-left: 6px;
      }
      .introduction_bottom_dis {
        line-height: 46px;
      }
    }
  }
  .home_introduction_m {
    margin: 72px 0 52px 0 !important;
    .introduction_top {
      width: 100%;
      margin: 0 auto;
      padding: 0 20px;
      .introduction_top_title {
        margin-bottom: 23px;
      }
    }
    .introduction_bottom {
      margin-top: 65px;
      .introduction_bottom_title {
        font-weight: 600;
        line-height: unset;
      }
      .title_text {
        font-weight: 200;
        vertical-align: text-top;
        margin-left: 6px;
      }
      .introduction_bottom_dis {
        line-height: unset;
      }
    }
  }
</style>
